<template>
  <div class="container">
    <div class="title">
      <select @change="changeFn">
        <option value="1">H5C3</option>
        <option value="2">javaScript</option>
        <option value="3">前端工程化</option>
        <option value="4">vue</option>
        <option value="5">uniapp</option>
      </select>
    </div>

    <div class="btn" @click="clickFn">{{ isStart ? "停止" : "开始" }}</div>
    <div class="questionTitle">{{ question.title }}</div>
    <textarea v-show="isShowAnswer">{{ question.answer }}</textarea
    ><br />
    <button v-if="!isStart && !isInit" @click="showAnswerFn">
      {{ isShowAnswer ? "关闭答案" : "显示答案" }}
    </button>
  </div>
</template>
<script setup>
import h5c3 from "./questions/h5c3";
import jsQuestion from "./questions/jsQuestion";
import engineering from "./questions/engineering";
import vueQuestion from "./questions/vueQuestion";
import uniappQuestion from "./questions/uniappQuestion";

import { ref, onBeforeUnmount } from "vue";

const isStart = ref(false);
const isShowAnswer = ref(false);
const isInit = ref(true);
const question = ref("");
let time = null;

const list = ref(jsQuestion);
const changeFn = (e) => {
  console.log(e.target.value);

  switch (Number(e.target.value)) {
    case 1:
      list.value = h5c3;
      break;
    case 2:
      list.value = jsQuestion;
      break;
    case 3:
      list.value = engineering;
      break;
    case 4:
      list.value = vueQuestion;
      break;
    case 5:
      list.value = uniappQuestion;
      break;
  }
};

const clickFn = () => {
  isStart.value = !isStart.value;
  isInit.value = false;
  isShowAnswer.value = false;
  if (isStart.value) {
    time = setInterval(() => {
      question.value =
        list.value[Math.floor(Math.random() * list.value.length)];
    }, 50);
  } else {
    clearInterval(time);
  }
};

const showAnswerFn = () => {
  isShowAnswer.value = !isShowAnswer.value;
};

onBeforeUnmount(() => {
  clearInterval(time);
});
</script>
<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
}
.container {
  padding: 20px;
  width: calc(100vw - 60px);
  height: calc(100vh - 60px);
  background-color: black;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .title {
    position: absolute;
    top: 0;
    right: 0;
  }
  .btn,
  .questionTitle {
    margin-bottom: 30px;
  }

  textarea {
    width: 500px;
    height: 200px;
    font-size: 16px;
  }
}
</style>
